<template>
	<view>
		<view class="common-header-xian"></view>
		<view class="container m-b6 p-bottom">
			<view class="addres-list custom-ul" v-if="list.length">
				<view class="custom-li" v-for="(item, index) in list" wx:for-item="item" :key="index">
					<view class="address-header b-f m-top18">
						<view class="flow-header-left pl-12">
							<view class="flow-checkout-admin">
								{{ item.name }}
								<text>{{ item.phone }}</text>
							</view>
							<view class="flow-checkout-address">{{ item.region.province }} {{ item.region.city }} {{ item.region.region }} {{ item.detail }}</view>
						</view>
					</view>
					<view class="address-list dis-flex b-f">
						<view class="list address-left">
							<radio-group @change="setDefault" class="radio-group">
								<label class="radio">
									<radio :checked="item.address_id == default_id" color="#ff495e" :value="String(item.address_id)"></radio>
									<text class="cont" v-if="item.address_id == default_id">默认</text>
									<text class="cont" v-else>选择</text>
								</label>
							</radio-group>
						</view>
						<view class="list address-right dis-flex">
							<view @tap="editAddress" :data-id="item.address_id">
								<text class="suifont sui-edit"></text>
								<text class="title">编辑</text>
							</view>
							<view @tap="removeAddress" :data-id="item.address_id">
								<text class="suifont sui-lajixiang"></text>
								<text class="title">删除</text>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view v-else>
				<view class="yoshop-notcont">
					<text class="suifont sui-wushuju"></text>
					<text class="cont">亲，您还没有收货列表</text>
				</view>
			</view>
			<view class="footer-fixed f-32"><view @tap="createAddress" class="order-bt" style="width:100%">添加新地址</view></view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			list: [],
			default_id: null,
			options: {}
		};
	},
	onLoad(options) {
		this.options = options;
	},
	onShow() {
		this.getAddressList();
	},
	methods: {
		getAddressList() {
			this.$u.api.getAddressList().then(res => {
				this.list = res.data.list;
				this.default_id = res.data.default_id;
			});
		},
		/**
		 * 添加新地址
		 */
		createAddress() {
			this.navigateTo({
				url: '/pageUser/address/create'
			});
		},
		/**
		 * 编辑地址
		 */
		editAddress(e) {
			this.navigateTo({
				url: '/pageUser/address/detail?address_id=' + e.currentTarget.dataset.id
			});
		},
		/**
		 * 移除收货地址
		 */
		removeAddress(e) {
			let address_id = e.currentTarget.dataset.id;
			uni.showModal({
				title: '提示',
				content: '您确定要移除当前收货地址吗?',
				success: o => {
					if (o.confirm) {
						this.$u.api.delAddress(address_id).then(res => {
							this.getAddressList();
						});
					}
				}
			});
		},
		/**
		 * 设置为默认地址
		 */
		setDefault(e) {
			let address_id = e.detail.value;
			this.default_id = parseInt(address_id);
			this.$u.api.setDefaultAddress(address_id).then(res => {
				this.options.from === 'flow' && this.navigateBack();
			});
			return false;
		}
	}
};
</script>

<style>
.container {
	width: 750rpx;
	overflow: hidden;
}
.address-list {
	border-bottom: 1px solid #f6f6f9;
}

.address-list .list {
	padding: 15rpx;
}

.address-list .list .title {
	font-size: 30rpx;
	padding: 0 24rpx 0 6rpx;
	color: #666;
}

.address-list .list .cont {
	font-size: 30rpx;
	color: #333;
}

.address-list .list navigator {
	display: inline-block;
}

.address-list .list image {
	width: 28rpx;
	height: 28rpx;
}

.address-left {
	flex: 5;
}

.address-right {
	flex: 5;
	justify-content: flex-end;
}

.address-right .iconfont {
	color: #777;
	font-size: 30rpx;
}

.flow-fixed-footer {
	position: fixed;
	bottom: 0;
	width: 100%;
	background: #f42424;
	z-index: 4999;
}

.flow-fixed-footer .chackout-left {
	font-size: 32rpx;
	line-height: 44px;
	color: #777;
}

.flow-fixed-footer .chackout-right {
	font-size: 34rpx;
}

.address-header {
	padding: 28rpx 0;
	border-bottom: 1px solid #f6f6f9;
	background-size: 120rpx auto;
	font-size: 1.7rem;
}

.flow-header-left {
	flex: 14;
	padding: 0rpx 20rpx;
}

.flow-header-right {
	flex: 1;
}

.flow-header-right image {
	width: 34rpx;
	height: 34rpx;
	margin-top: 20rpx;
	float: right;
}

.address-header .flow-checkout-admin {
	font-size: 34rpx;
	color: #444;
}

.address-header .flow-checkout-admin text {
	padding: 0 10rpx;
}

.address-header .flow-checkout-address {
	font-size: 26rpx;
	color: #777;
	margin-top: 6rpx;
}

.radio-group raido {
	color: #f42424;
}
</style>
